<template>
  <div class="coupon-activationed">
    <couponCard :cardId="cardId" @sendCouponInfo="getCouponInfo" />
    <block v-if="couponInfo.surplus_number">
      <div class="info-box-t">
        <div class="text">
          剩余次数：<text class="blue">{{ couponInfo.surplus_number }}</text>
        </div>
        <div class="text">
          入园人数：<text class="blue">{{ couponInfo.people_number }}</text>
        </div>
      </div>
      <div class="time">
        可使用日期 {{ couponInfo.start_time_name }}至{{
          couponInfo.end_time_name
        }}
      </div>
    </block>
    <!-- <view class="van-hairline--bottom"></view> -->

    <template v-if="couponInfo.state == 1">
      <div class="code-text">{{ token }}</div>
      <div class="pic">
        <canvas canvas-id="qrcode" style="width: 100%;height: 100%;" />
      </div>
      <div class="tips">请向商家出示您的二维码进行核销</div>
    </template>
    <template v-else-if="couponInfo.state == 3 || couponInfo.state == 4">
      <img src="https://media.wxcwy.com/mini/images/img_kaquan@2x.png" class="empty-img" />
      <div class="tips des">您的卡券次数已使用完，或已过期</div>
    </template>

    <div class="footer-btn">
      <a
        class="link"
        :url="`/pages/coupon/couponInfo/couponInfo?id=${cardId}`"
        hover-class="none"
        >卡券信息<text class="arrow-q-icon"></text
      ></a>
      <div class="v-hr"></div>
      <a
        class="link"
        :url="
          `/pages/coupon/couponHistory/couponHistory?id=${couponInfo.card_no}`
        "
        hover-class="none"
        >使用记录<text class="arrow-q-icon"></text
      ></a>
    </div>
  </div>
</template>
<script>
var intervarID, countTime;
import uQRCode from "@/common/uqrcode.js";
import couponCard from "../_coupon/coupon-card";
export default {
  components: {
    couponCard,
  },
  data() {
    return {
      couponInfo: {},
      cardId: "",
      cardNo: "",
      token: "",
    };
  },
  onLoad(options) {
    uni.showLoading({
      title: "加载中...",
    });
    this.cardId = options.id;
    this.cardNo = options.card_no;
    if (options.card_no) {
      this.getQrCode();
    }
  },
  onHide() {
    clearInterval(intervarID);
  },
  onUnload() {
    clearInterval(intervarID);
  },
  methods: {
    getCouponInfo(data) {
      this.couponInfo = data;
    },
    getQrCode(third_no) {
      this.$api.getQrCode({ type: 3, third_no: this.cardNo }).then((res) => {
        if (res.code == 200) {
          let { token, url } = res.data;
          this.token = token;
          this.make(url);
          uni.hideLoading();
        }
      });
    },
    make(text) {
      uQRCode.make({
        canvasId: "qrcode",
        componentInstance: this,
        text: text,
        size: uni.upx2px(408),
        margin: 10,
        backgroundColor: "#ffffff",
        foregroundColor: "#000000",
        fileType: "jpg",
        correctLevel: uQRCode.defaults.correctLevel,
        success: (res) => {
          countTime = 58;
          intervarID = setInterval(() => {
            countTime--;
            if (countTime < 0) {
              clearInterval(intervarID);
              this.getQrCode();
            }
          }, 1000);
        },
      });
    },
  },
};
</script>
<style lang="scss">
.coupon-activationed {
  padding: 30rpx 20rpx;
  box-sizing: border-box;
  font-size: 28rpx;
  color: #333;
  .blue {
    color: #1772ff;
  }
  .info-box-t {
    display: flex;
    justify-content: center;
    margin-bottom: 20rpx;
    .text {
      flex: 0 0 220rpx;
      border-radius: 23rpx;
      background: rgba(244, 244, 244, 1);
      line-height: 46rpx;
      margin-left: 30rpx;
      text-align: center;
    }
  }
  .time {
    text-align: center;
    color: #999999;
    font-size: 26rpx;
  }
  .code-text {
    text-align: center;
    margin-top: 50rpx;
  }
  .pic {
    width: 448rpx;
    height: 448rpx;
    margin: 30rpx auto 40rpx;
    padding: 20rpx;
    background: #f4f4f4;
    box-sizing: border-box;
  }
  .tips {
    text-align: center;
    &.des {
      color: #999999;
    }
  }
  .empty-img {
    display: block;
    width: 410rpx;
    height: 315rpx;
    margin: 120rpx auto 40rpx;
  }
  .footer-btn {
    display: flex;
    margin-top: 100rpx;
    color: #1772ff;
    justify-content: center;
    align-items: center;
    .v-hr {
      width: 1rpx;
      height: 32rpx;
      background: #b2b2b2;
      margin: 0 50rpx;
    }
    .link {
      display: flex;
      align-items: center;
      white-space: nowrap;
      .arrow-q-icon {
        flex: 0 0 24rpx;
        height: 24rpx;
        background: url(https://media.wxcwy.com/mini/images/morebl_icoc@2x.png) no-repeat;
        background-size: 100%;
        margin-left: 10rpx;
      }
    }
  }
}
</style>
